<template>
  <div class="pie-chart-container">
    <ve-pie :data="chartData" :extend="extend" :settings="chartSettings" ref="vepie" top="0px"></ve-pie>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    return {
      chartData: {
        columns: ["指标", "占比"],
        rows: [
          // { 指标: "1/1", 值: 1393 },
        ]
      },
      chartSettings: {
        selectedMode: "single",
        radius: 130,
        offsetY: 180,
        label: {
          show: true
        },
        itemStyle: {
          normal: {
            //饼状图阴影，值越大阴影亮度越高
            shadowBlur: 15,
            shadowColor: "rgba(0, 0, 0, 0.4)"
          }
        }
      },
      extend: {
        color: [
          "#fbd437",
          "#4ecb73",
          "#36cbcb",
          "#3aa1ff",
          "#975fe5",
          "#f2637b"
        ],
        legend: {
          bottom: 0,
          icon: "circle"
        },
        grid: {
          top: 100
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              show: true,
              excludeComponents: ["toolbox"],
              pixelRatio: 2
            }
          }
        }
      }
    };
  },
  mounted() {
    this.$nextTick(_ => {
      this.$refs[`vepie`].echarts.resize();
    });
  }
};
</script>
